<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>随堂演示js10.1</title>
		<style type="text/css">
			#div1, #div2{
				float: left;
				width: 150px;
				height: 100px;
				background-color: cadetblue;
				margin: 10px;
				color: white;
				text-align: center;
				padding-top: 20px;
				clear: both;
			}
			 
		</style>
	</head>
	<body>
		<!--onblur失去焦点-->
		<input type="text" id="txtOnBlur" value="onblur" title="onblur失去焦点" />
		<!--onfocus得到焦点-->
		<input type="text" id="txtOnFocus" value="onfocus" title="onfocus得到焦点" />
		
		<!--onchange改变值-->
		<input type="text" id="txtOnChange" title="onchange改变值" value="onchange" />
		<select id="slcOnChange">
			<option value="1">第一个</option>
			<option value="2">第二个</option>
		</select>
		
		<!--ondblclick双击-->
		<input type="button" id="btnDbClick" value="测试双击,单击无用" />
		
		<!--onerror-->
		<!-- <img src="23231.jpg" alt="加载图片文件错误事件onerror" id="imgOnError" /> -->
		
		<!--onkeydown某个键盘的键被按下-->
		<input type="text" id="txtOnKeydown" value="onkeydown" />
		 <!--onkeypress某个键盘的键被松开-->
		<input type="text" id="txtOnKeyup" value="onkeyup" />
		<!--onkeypress某个键盘的键被按下或按住-->
		<input type="text" id="txtOnKeypress" value="onkeypress" />
		
		<div id="div1">
			把鼠标移到这里。快！
		</div>
		
		<div id="div2">
			点击这里！
		</div>
		
		<!--演示onselect方法-->
		<textarea id="txtOnSelect" cols="30" rows="10">用来测试onselect事件</textarea>
		
		
		<!--演示onreset和onsubmit方法-->
		<form method="post" id="frm1">
			
			<input type="text" name="txtFrm1" id="txtFrm1" value="这里输入点什么吧" placeholder="请输入" />
			<select name="slcFrm" id="slcFrm1">
				<option value="1">选项1</option>
				<option value="2" selected="selected">选项2</option>
			</select>
			
			<button type="reset">重置按钮</button>
			<button type="submit">提交按钮</button>
		</form>
		
		<a href="http://baidu.com">跳转到百度</a>
		
		<script type="text/javascript">
			// 获取焦点然后失去焦点后触发
			var txtOnBlur = document.getElementById('txtOnBlur');
			txtOnBlur.onblur = function(){
				alert("txtOnBlur失去了焦点");
			}
			
			var txtOnFocus = document.getElementById('txtOnFocus');
			txtOnFocus.onfocus = function(){
				txtOnFocus.value = "得到了焦点"
				// alert('得到了焦点')
			}
			
			// 文本框类的元素当值被修改并失去焦点时才会触发onchange
			var txtOnChange = document.getElementById("txtOnChange");
			txtOnChange.onchange = function(){
				alert("txtOnChange的值被修改");
			}
			// select当被选中的项改变时就会触发onchange
			var slcOnChange = document.getElementById('slcOnChange');
			slcOnChange.onchange = function(){
				alert("slcOnChange的值被修改")
			}
			
			// 双击鼠标左键
			var btnDbClick = document.getElementById('btnDbClick');
			btnDbClick.ondblclick = function(){
				alert("双击666");
			}
			
			// 当图片文件加载错误时触发 onerror事件
// 			var imgOnError = document.getElementById('imgOnError');
// 			imgOnError.onerror = function(){
// 				alert("图片不显示啊老湿");
// 			}

            // onkeydown 键盘某个键被按下
            var txtOnKeydown = document.getElementById('txtOnKeydown');
            txtOnKeydown.onkeydown = function(){
            	console.log("1.txtOnKeydown现在的值为:" + this.value);
            }
			// 默认情况下时间绑定的函数只有最后绑定的会生效
            txtOnKeydown.onkeydown = function(e){
            	// console.log("2.txtOnKeydown现在的值为:" + this.value);
            	console.log("2.txtOnKeydown现在按下的键为:" + e.keyCode);
            }
			
			// onkeyup某个键盘的键被松开
			document.getElementById('txtOnKeyup').onkeyup = function(e){
				console.log("txtOnKeyup被松开的键为:" + e.keyCode);
			} 
			
			// onkeypress某个键盘的键被按下或按住.
			// onkeydown优先于onkeypress
			document.getElementById('txtOnKeypress').onkeypress = function(e){
				console.log("txtOnKeypress按下的键为:" + e.keyCode)
			}
			// 页面或图像被加载完毕时执行
			window.onload = function(){
				// 输出1.这个flag在下面的代码声明和赋值。说明这里的代码晚于赋值语句的执行。这里的加载完毕包括js
				console.log("网页加载完毕:flag=" + flag);
			}
			var flag = 1;
			
			// 多个window.onload以最后一个为准
// 			window.onload = function(){
// 				console.log("网页加载完毕2:flag=" + flag);
// 			}
// 			
// 			flag = 2;
			
			// 某个鼠标按键被按下,0为左键，1为 滚轮，2为右键
            document.onmousedown = function(e){
            	console.log("被按下的鼠标按键为:" + e.button);
            }
			
			
			/*处理div1的鼠标移入和移出事件*/
			var div1 = document.getElementById('div1');
			div1.onmouseover = function(){
				this.innerHTML = "靴靴！";
			}
			div1.onmouseleave = function(){
				this.innerHTML = "把鼠标移到这里。快！"
			}
			
			// 处理div2的点击事件
			var div2 = document.getElementById('div2');
			div2.onclick = function(){
				var val = this.innerHTML;
				if(val.indexOf("再见") > -1){
					this.style.display = 'none';
				}else if(val.indexOf('谢谢') > -1){
					this.innerHTML = "再见";
				}else if(val.indexOf("再点") > -1){
					this.innerHTML = "谢谢";
				}else if(val.indexOf("再次") > -1){
					this.innerHTML += "<br />再点一次";
				}else if(val.indexOf("点击") > -1){
					this.innerHTML += "<br />再次点击这里"
				}
			}
			
			
			// 当鼠标移动时触发
// 			document.onmousemove = function(e){
// 				console.log("鼠标在移动，当前坐标x=" + e.x +",y=" +e.y);
// 			}
			
			// 某个鼠标被松开
			document.onmouseup = function(e){
				console.log("被松开的鼠标按键是：" + e.button)
			}
			
			// 窗口被改变尺寸时触发
			window.onresize = function(){
				console.log("窗口被改变了尺寸,当前尺寸为:" + this.innerWidth + "," +this.innerHeight);
			}
			
			// 当文本被选中的时候触发
			var txtOnSelect = document.getElementById('txtOnSelect');
			txtOnSelect.onselect = function(){
				// 获取页面被选中的文本
				var txt = window.getSelection ? window.getSelection() : document.selection.createRange().text;
				alert('被选中的文字是:' + txt);
			}
			
			// 演示表单的onreset和onsubmit方法
			
			var frm1 = document.getElementById('frm1');
			// 在按钮被点击后。表单被重置前执行
			frm1.onreset = function(){
				alert("表单frm1的填入的信息已被重置");
			}
			
			// 在表单被提交前执行
			frm1.onsubmit = function(){
				alert("表单frm1正在提交，取消这次提交");
				// 返回false可中断事件执行
				return false;
				
			}
			
			// 用户关闭窗口时触发
			// IE浏览器 页面跳转、刷新页面能执行，但关闭浏览器不能执行；
			// firefox 页面跳转能执行，但刷新页面、关闭浏览器不能执行；
			// Safari 刷新页面、页面跳转，关闭浏览器都会执行（均未触发)；
			// Opera、Chrome任何情况都不执行。
			window.onunload = function(){
				if(!confirm("确定要关闭这个窗口么？"))
					return false;
			}
			
			// keypress的keyword与ascii码十进制的数字对应.
			window.onkeypress = function(e){
				console.log('window的onkeypress事件,keycode=' + e.keyCode);
			}
			
		</script>
	</body>
</html>
